<template>
  <div>
    <el-card>
      <!--评论-->
      <div class="article-operation">
        <font-awesome-icon @click="goComment" :icon="['far', 'comment-dots']"
                           class="article-operation-icon"></font-awesome-icon>
        <div class="article-operation-left">{{ articleActionAndConfig.comment_count }}</div>
        <div class="article-operation-span"></div>
      </div>
      <!--收藏-->
      <div class="article-operation">
        <font-awesome-icon v-if="!articleActionAndConfig.is_collection" @click="collect" :icon="['far', 'star']"
                           class="article-operation-icon"></font-awesome-icon>
        <font-awesome-icon v-else @click="collect" :icon="['far', 'star']" class="article-operation-icon-actited"></font-awesome-icon>
        <div class="article-operation-left">{{ articleActionAndConfig.collection_count }}</div>
        <div class="article-operation-span"></div>
      </div>
      <!--点赞-->
      <div class="article-operation">
        <font-awesome-icon v-if="!articleActionAndConfig.is_like" @click="like" :icon="['far', 'thumbs-up']"
                           class="article-operation-icon"></font-awesome-icon>
        <font-awesome-icon v-else @click="like" :icon="['far', 'thumbs-up']"
                           class="article-operation-icon-actited"></font-awesome-icon>
        <div class="article-operation-left">{{ articleActionAndConfig.fabulous_count }}</div>
        <div class="article-operation-span"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import { GetUrlParam } from '../../utils/getUrlParams'

export default {
  data () {
    return {}
  },
  created () {
    this.getArticleActionAndConfig()
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    ...mapMutations('HomePage', {
      setArticleActionAndConfig: 'setArticleActionAndConfig',
      addArticleActionAndConfigFabulousCount: 'addArticleActionAndConfigFabulousCount',
      subArticleActionAndConfigFabulousCount: 'subArticleActionAndConfigFabulousCount',
      reverseArticleActionAndConfigFabulousCount: 'reverseArticleActionAndConfigFabulousCount',
      subArticleActionAndConfigCollectionCount: 'subArticleActionAndConfigCollectionCount',
      addArticleActionAndConfigCollectionCount: 'addArticleActionAndConfigCollectionCount',
      reverseArticleActionAndConfigCollectionCount: 'reverseArticleActionAndConfigCollectionCount'
    }),
    ...mapActions('HomePage', { getArticleAction: 'getThisArticleAction' }),
    // 点赞、取消赞
    like: function () {
      var data = {}
      data.articleId = GetUrlParam('articleid')
      data.operation = this.getArticleActionAndConfigOfState.is_like ? 1 : 0
      // 去articleActionList找到对应的articleId,找到后将文章id，是否点赞
      const url = this.$config.urls.get('like_behavior')
      this.$memory.getEquipmentId().then(equipmentId => {
        return new Promise((resolve, reject) => {
          this.$http.post(url, {
            equipment_id: equipmentId,
            article_id: data.articleId,
            type: 0,
            operation: data.operation
          }).then((d) => {
            resolve(d)
          }).catch((e) => {
            reject(e)
          })
        })
      }).catch(e => {
        return new Promise((resolve, reject) => {
          reject(e)
        })
      }).then(d => {
        if (d.data.code === 0) {
          // console.log(d.data)
          if (data.operation === 1) {
            this.subArticleActionAndConfigFabulousCount(data.articleId)
          } else {
            this.addArticleActionAndConfigFabulousCount(data.articleId)
            this.getLikeExperience()
          }
          this.reverseArticleActionAndConfigFabulousCount(data.articleId)
        } else {
          console.log(d)
          this.$message.error(d.data.errorMessage)
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    // 收藏、取消收藏
    collect: function () {
      var data = {}
      data.articleId = GetUrlParam('articleid')
      data.operation = this.getArticleActionAndConfigOfState.is_collection ? 1 : 0
      // 去articleActionList找到对应的articleId,找到后将文章id，是否点赞
      const url = this.$config.urls.get('collection_behavior')
      this.$memory.getEquipmentId().then(equipmentId => {
        return new Promise((resolve, reject) => {
          this.$http.post(url, {
            equipment_id: equipmentId,
            article_id: data.articleId,
            type: 0,
            operation: data.operation
          }).then((d) => {
            resolve(d)
          }).catch((e) => {
            reject(e)
          })
        })
      }).catch(e => {
        return new Promise((resolve, reject) => {
          reject(e)
        })
      }).then(d => {
        if (d.data.code === 0) {
          console.log(d.data)
          if (data.operation === 1) {
            this.subArticleActionAndConfigCollectionCount(data.articleId)
          } else {
            this.getCollectionExperience()
            this.addArticleActionAndConfigCollectionCount(data.articleId)
          }
          this.reverseArticleActionAndConfigCollectionCount(data.articleId)
        } else {
          console.log(d)
          this.$message.error(d.data.errorMessage)
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    // 评论
    goComment () {
      document.querySelector('.article-operator-report').scrollIntoView(
        {
          behavior: 'smooth', // 平滑过渡
          block: 'start' // 上边框与视窗顶部平齐
        })
    },
    // 拿到ArticleActionAndConfig
    async getArticleActionAndConfig () {
      var params = {}
      params.articleId = GetUrlParam('articleid')
      params.url = this.$config.urls.get('load_article_action_and_config')
      await this.$memory.getEquipmentId().then(equipment => {
        params.equipmentId = equipment
      }).catch(e => {
        console.log(e)
      })
      // console.log(params)
      this.getArticleAction(params)
    },
    // 点赞经验
    getLikeExperience () {
      this.$memory.getUser().then(userString => {
        if (userString === null) {
          return
        }
        const user = JSON.parse(userString)
        // console.log(user)
        var id = user.id
        console.log(id)
        const url = this.$config.urls.get('fabulous_experience') + id
        this.$http.get(url).then(res => {
          if (res.data.code !== 0) {
            this.$message.warning(res.data.error_message)
          }
        })
      })
    },
    // 收藏经验
    getCollectionExperience () {
      this.$memory.getUser().then(userString => {
        if (userString === null) {
          return
        }
        const user = JSON.parse(userString)
        // console.log(user)
        var id = user.id
        console.log(id)
        const url = this.$config.urls.get('collection_experience') + id
        this.$http.get(url).then(res => {
          if (res.data.code !== 0) {
            this.$message.warning(res.data.error_message)
          }
        })
      })
    }
  },
  computed: {
    ...mapGetters('HomePage', { articleActionAndConfig: 'articleActionAndConfig', getArticleActionAndConfigOfState: 'getArticleActionAndConfigOfState' })
  },
  name: 'articleLeftOperation'
}
</script>

<style lang="less" scoped>
.article-operation {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-operation-left {
  color: #b2b2b2;
}

.article-operation-icon {
  width: 40px;
  height: 40px;
  color: #b2b2b2;
}

.article-operation-icon:hover {
  color: #00c3ff;
}

.article-operation-icon-actited {
  width: 40px;
  height: 40px;
  color: #00c3ff;
}

.article-operation-span {
  margin-top: 5px
}
</style>
